<template>
  <view class="container">
    <!-- 帖子内容 -->
    <scroll-view scroll-y class="post-content">
      <view v-if="authorimg" class="author-info">
        <image :src="authorimg" class="avatar"></image>
        <view class="info-details">
          <text class="nickname" style="color: black;font-weight: bold">{{ author }}</text>
          <text class="time">{{ time }}</text>
        </view>
      </view>
      <image v-if="contentimg" :src="contentimg" class="post-image" mode="widthFix"></image>
      <text v-if="topic" class="caption">{{ topic }}</text>
      <text v-if="content" class="content">{{ content }}</text>
      <view class="divider-line"></view>
      <view v-if="up && down" class="interaction-section">
        <view class="icons-container">
          <view class="icon-symbol icon-symbol-pinglun"></view>
          <text style="font-size: 15px;">{{ down }} </text>
          <view class="icon-symbol icon-symbol-dianzan" @click="handleLikeClick"></view>
          <text style="font-size: 15px;">{{ up }} </text>
        </view>
        <input type="text" v-model="newComment" placeholder="说点什么吧~" class="comment-input" />
      </view>
      <view v-if="comments.length > 0" class="comments-section">
        <view v-for="(comment, index) in comments" :key="index" class="comment-item">
          <image :src="comment.author.avatar" class="avatar"></image>
          <view class="comment-details">
            <text class="nickname">{{ comment.author.nickname }}</text>
            <text class="comment-text">{{ comment.text }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { UniAdapter } from 'uniapp-axios-adapter';
import {onLoad} from '@dcloudio/uni-app';

// 定义文章图片，后端未提供
const contentimg = ref('https://q1.itc.cn/q_70/images03/20240923/faeb862d73ac4b96af0f46361b4f8fe9.jpeg');
const defaultAuthorImg = 'https://q1.itc.cn/q_70/images03/20240923/faeb862d73ac4b96af0f46361b4f8fe9.jpeg';

// 初始化接收的参数
const id = ref('');
const author = ref('');
const time = ref('');
const topic = ref('');
const content = ref('');
const down = ref('');
const up = ref('');
const authorimg = ref(defaultAuthorImg);

// 评论数据
const comments = ref([]);
const newComment = ref('');

// 创建 Axios 实例
const instance = axios.create({
  adapter: UniAdapter,
  timeout: 10000,
  baseURL: 'http://localhost:8081'
});

// 安全解码函数
const safeDecode = (value) => {
  try {
    return decodeURIComponent(value || '');
  } catch (e) {
    console.error('解码失败:', e);
    return '';
  }
};

// 清理参数中的非法字符
const cleanParam = (value) => {
  return value.replace(/[^\w\d:\/.-]/g, '');
};

// 加载评论数据
const loadComments = async () => {
  try {
    const response = await instance.get(`/comments/${id.value}`);
    comments.value = response.data;
  } catch (error) {
    console.error('加载评论失败:', error);
  }
};

// 处理点赞点击事件
const handleLikeClick = async () => {
  const currentUp = parseInt(up.value) || 0;
  const newUp = currentUp + 1;
  up.value = newUp.toString();
  console.log('当前点赞数为：', up.value);

  try {
    const response = await instance.post('/topic/', {
      id: id.value,
      up: newUp
    });
    console.log('点赞更新成功:', response);
  } catch (error) {
    console.error('点赞更新失败:', error);
    up.value = (newUp - 1).toString();
  }
};

// 使用 onMounted 生命周期函数接收参数
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  console.log('接收到的原始参数:', options);
  
  if (options) {
    // 对参数进行解码并赋值给相应的响应式变量
    id.value = cleanParam(safeDecode(options.id));
    author.value = options.author ? safeDecode(options.author) : '';
    time.value = cleanParam(safeDecode(options.time));
    topic.value = options.topic ? safeDecode(options.topic) : '';
    content.value = options.content ? safeDecode(options.content) : '';
    down.value = cleanParam(safeDecode(options.down));
    up.value = cleanParam(safeDecode(options.up));
    const cleanAuthorImg = cleanParam(safeDecode(options.authorimg));
    authorimg.value = cleanAuthorImg || defaultAuthorImg;

    console.log('解码后的参数:', {
      id: id.value,
      author: author.value,
      time: time.value,
      topic: topic.value,
      content: content.value,
      down: down.value,
      up: up.value,
      authorimg: authorimg.value,
    });

    // 加载评论数据
    loadComments();
  } else {
    console.warn('没有获取到页面选项');
  }
});
</script>

<style lang="scss">
@import '@/static/font/iconfont.css';

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 15px;
}

.post-content {
  flex: 1;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.content {
  display: block;
  margin-top: 12px;
  margin-bottom: 12px;
}

.divider-line {
  flex: 1;
  height: 0.5px;
  background-color: #ddd;
  margin-bottom: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.info-details {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 16px;
  color: #8f8f8f;
}

.time {
  color: #999;
  font-size: 12px;
}

.caption {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 10px;
}

.post-image {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.interaction-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.icons-container {
  display: flex;
  justify-content: space-between;
  width: 80px;
}

.comment-input {
  width: 200px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 14px;
}

.comments-section {
  margin-top: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.comment-item {
  display: flex;
  margin-bottom: 10px;
}

.comment-details {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
}

.comment-text {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  font-family: Arial;
}
</style>